<template>
	<view>
		<view class="navBar">
			<view class="left">
			</view>
			<view class="center">购物车</view>
			<view class="right" @click="changeEdit">编辑</view>
		</view>
		<view class="cartList">
			<checkbox-group name="">
				<view class="cartItem" v-for="(item,index) in cart" :key="index">
					<view class="ckbox">
						<checkbox value="" :checked="item.selected" @click="toggleSingleSelect(index)" />
					</view>
					<view class="image">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="text">
						<view class="goodsName">{{item.goodsName}}</view>
						<view class="specifications">{{item.specifications}}</view>
						<view class="price-numsBox">
							<view class="price">￥{{item.price}}</view>
							<view class="numsBox">
								<view class="btn" @click="removeQuantity(index)">-</view>
								<view class="num" @click="numsInput(index)">{{item.quantity}}</view>
								<view class="btn" @click="addQuantity(index)">+</view>
							</view>
						</view>

					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="bottom"></view>
		<view class="foot" ref="foot">

			<label>
				<checkbox @click="toggleAllSelect" :checked="selectAll" /><text>全选</text>
			</label>

			<view class="total"><text>合计:</text>￥{{total}}</view>
			<view class="btn-submit" @click="addOrder" v-if="!edit">去结算</view>
			<view class="btn-remove" @click="removeCart" v-if="edit">删除</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				cart: [],
				total: 0.00,
				selectAll: false,
				token: '',
				edit: false,
			}
		},
		onShow() {
			this.getCart();
			this.selectAll = false;
		},
		onPullDownRefresh() {
			this.getCart();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.token = uni.getStorageSync("token");
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			getCart() {
				if (this.token) {
					uni.request({
						url: 'http://localhost:8080/cart/findAllCart',
						method: 'GET',
						data: {
							token: this.token,
						},
						success: res => {
							if (res.data) {
								console.log(res.data);
								this.cart = res.data;
								this.cart.forEach(item => {
									item.selected = false;
								})
								this.sum();
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.cart = [];
				}
			},
			removeCart() {
				let removeData = [];
				this.cart.forEach(item => {
					if (item.selected) {
						removeData.push(item.cartId);
						console.log(removeData);
					}
				});
				if (removeData.length) {
					uni.request({
						url: 'http://localhost:8080/cart/removeCart',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
						},
						data: {
							cartsId: removeData,
						},
						success: res => {
							this.getCart();
							this.selectAll=false;
							uni.showToast({
								icon: "success",
								title: "删除购物车",
							})
						},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.showToast({
						icon: "error",
						title: "请选择商品"
					})
				}
			},
			updateQuantity(cartId, quantity) {
				uni.request({
					url: 'http://localhost:8080/cart/changeQuantity',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					data: {
						cartId: cartId,
						quantity: quantity
					},
					success: res => {
						this.sum();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			addOrder() {
				let chooseItem = [];
				this.cart.forEach(item => {
					if (item.selected) {
						chooseItem.push(item)
					}
				})
				if (chooseItem.length == 0) {
					uni.showToast({
						icon: "error",
						title: "请选择商品"
					})
				} else {
					uni.request({
						url: 'http://localhost:8080/order/addOrder',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
						},
						data: {
							totalPrice: this.total,
							token: this.token,
							cartListJson: JSON.stringify(chooseItem),
						},
						success: res => {
							if (res.data == "库存不足") {
								uni.showToast({
									icon: "error",
									title: "库存不足"
								})
							} else {
								this.toOrder(res.data);
							}

						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			toOrder(orderId) {
				uni.navigateTo({
					url: '/pages/order/order?orderId=' + orderId,
				});
			},
			toggleAllSelect() {
				this.selectAll = !this.selectAll;
				this.cart.forEach(item => {
					item.selected = this.selectAll;
				})
				this.sum();
			},
			toggleSingleSelect(index) {
				this.cart[index].selected = !this.cart[index].selected;
				this.selectAll = this.cart.every(item => item.selected)
				this.sum();
			},


			sum() {
				let sum = 0.00;
				this.cart.forEach(item => {
					if (item.selected) {
						sum += item.price * item.quantity;
					}
				})
				this.total = sum;
			},
			addQuantity(index) {
				if (this.cart[index].quantity < 100) {
					this.cart[index].quantity++
					this.updateQuantity(this.cart[index].cartId, this.cart[index].quantity)
				} else {
					uni.showToast({
						icon: 'error',
						title: '限购100件'
					})
				}
			},
			removeQuantity(index) {
				if (this.cart[index].quantity > 1) {
					this.cart[index].quantity--;
					this.updateQuantity(this.cart[index].cartId, this.cart[index].quantity)
				}
			},
			changeEdit() {
				this.edit = !this.edit;
			},
			numsInput(index) {
				let quantity = this.cart[index].quantity.toString()
				uni.showModal({
					title: '数量',
					editable: true,
					placeholderText: quantity,
					success: res => {
						if (res.confirm) {
							if (res.content == Number(res.content) && Number(res.content) > 0 && Number(res
									.content) < 100) {
								this.cart[index].quantity = Number(res.content);
								this.updateQuantity(this.cart[index].cartId, this.cart[index].quantity)
							} else if (Number(res.content) > 100) {
								uni.showToast({
									icon: 'error',
									title: '限购100件'
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: '输入类型错误'
								})
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.navBar {
		display: flex;
		height: 100rpx;
		background-color: white;
		align-items: center;
		padding: 0 30rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: 100rpx;
		/* #endif */

		.left {
			flex: 1;
		}

		.center {
			flex: 1;
			color: #646566;
			text-align: center;
			font-size: 34rpx;
			font-weight: 700;
		}

		.right {
			flex: 1;
			color: #646566;
			text-align: right;
			font-size: 34rpx;
			font-weight: 700;
		}
	}

	.cartList {
		padding: 20rpx;

		.cartItem {
			display: flex;
			padding: 0rpx 20rpx;
			align-items: center;
			height: 260rpx;
			background-color: white;
			border-radius: 25rpx;
			margin-bottom: 20rpx;

		}

		.image {
			width: 220rpx;
			height: 220rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				width: 220rpx;
				height: 220rpx;
			}
		}

		.text {
			flex: 3;
			width: 300rpx;
			margin-left: 20rpx;

			.specifications,
			.goodsName {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.specifications {
				margin-top: 20rpx;
				margin-bottom: 40rpx;
			}
		}

		.price-numsBox {
			display: flex;

			.price {
				// width: 120rpx;
				flex: 1;
				color: red;
				font-weight: 700;
				font-size: 34rpx;
			}

			.numsBox {
				flex: 1;
				display: flex;
				align-items: center;

			}

			.btn {
				width: 50rpx;
				height: 50rpx;
				background-color: #15b1ff;
				font-size: 50rpx;
				line-height: 46rpx;
				text-align: center;
				color: white;
				border-radius: 50%;
			}

			.num {
				padding: 0 20rpx;
			}
		}

	}

	.bottom {
		height: 100rpx;
	}

	.foot {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-around;
		bottom: 100rpx;
		/* #ifdef MP-WEIXIN */
		bottom: 0rpx;
		/* #endif */
		width: 100%;
		height: 100rpx;
		background-color: white;

		.total {}

		.btn-submit {
			width: 200rpx;
			height: 80rpx;
			background-color: #15b1ff;
			color: white;
			font-size: 38rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 50rpx;

		}

		.btn-remove {
			width: 200rpx;
			height: 80rpx;
			background-color: #ff2a2a;
			color: white;
			font-size: 38rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 50rpx;
		}
	}
</style>